<template>
  <div class="flex flex-col h-full">
    <a-card>
      <div class="flex justify-between items-center">
        <div>
          <a-button type="primary" class="mr-4" @click="router.go(-1)"> 返回 </a-button>
          <a-button v-if="!route.query?.status" type="primary" ghost @click="onPrint">打印</a-button>
        </div>
      </div>
    </a-card>
    <div class="flex justify-center overflow-y-scroll">
      <a-card class="mt-2 w-[1200px] justify-center" :body-style="{ height: '100%', overflow: 'auto' }" :loading="loading">
        <BaseTitle title="统计范围" />
        <BaseTable max-fill :data-source="dataSource?.checkoutTotleResponseList" :columns="columns" />
        <div class="flex justify-between mt-2">
          <BaseTitle title="收款汇总" />
          <div class="w-40">
            <!-- <span v-if="chargeRole"> &nbsp; 收费员: {{ chargeRole }} </span> -->
          </div>
        </div>
        <a-descriptions class="descriptions" bordered :column="5" :label-style="{ width: '135px' }" :content-style="{ width: '100px' }">
          <a-descriptions-item label="收费小计">{{ formatAmount(dataSource.pjxxsrResponse?.hjskhz || 0) }}</a-descriptions-item>
          <a-descriptions-item label="预收款支付">{{ formatAmount(dataSource.pjxxsrResponse?.hjskyskzf || 0) }}</a-descriptions-item>
          <a-descriptions-item label="优惠小计">{{ formatAmount(dataSource.pjxxsrResponse?.hjskyhhj || 0) }}</a-descriptions-item>
          <a-descriptions-item label="分币误差">{{ formatAmount(dataSource.pjxxsrResponse?.hjskfbhj || 0) }}</a-descriptions-item>
          <a-descriptions-item label="收款合计">{{ formatAmount(dataSource.pjxxsrResponse?.hjskhj || 0) }}</a-descriptions-item>
          <a-descriptions-item v-for="item in dataSource.hjskResponse" :key="item.bh" :label="item.mc">{{ formatAmount(item.sjje) }}</a-descriptions-item>
          <a-descriptions-item label="医保">{{ formatAmount(dataSource.pjxxsrResponse?.ybzfhj || 0) }}</a-descriptions-item>
        </a-descriptions>

        <BaseTitle title="预收款收入" class="mt-2" />
        <a-descriptions class="descriptions" bordered :column="5" :label-style="{ width: '135px' }" :content-style="{ width: '100px' }">
          <a-descriptions-item label="收费小计">{{ formatAmount(dataSource.pjxxsrResponse?.yjskhz || 0) }}</a-descriptions-item>
          <a-descriptions-item label="(其中退费小计)">{{ formatAmount(dataSource.pjxxsrResponse?.yjsktfhj || 0) }}</a-descriptions-item>
          <a-descriptions-item label="优惠小计">{{ formatAmount(dataSource.pjxxsrResponse?.yjskybzfhj || 0) }}</a-descriptions-item>
          <a-descriptions-item label="分币误差">{{ formatAmount(dataSource.pjxxsrResponse?.yjskfbwc || 0) }}</a-descriptions-item>
          <!-- <a-descriptions-item label="退费小计">{{ formatAmount(dataSource.pjxxsrResponse?.yjsktfhj || 0) }}</a-descriptions-item> -->
          <a-descriptions-item label="预收款合计">{{ formatAmount(dataSource.pjxxsrResponse?.yjskhj || 0) }}</a-descriptions-item>
          <!-- <a-descriptions-item label="预收款合计">{{ formatAmount(dataSource.pjxxsrResponse?.sjsr || 0) }}</a-descriptions-item> -->
          <a-descriptions-item v-for="item in dataSource.yjsrResponse" :key="item.bh" :label="item.mc">{{ formatAmount(item.sjje) }}</a-descriptions-item>
          <a-descriptions-item label="医保">-</a-descriptions-item>
        </a-descriptions>

        <BaseTitle title="会员收入" class="mt-2" />
        <a-descriptions class="descriptions" bordered :column="3" :label-style="{ width: '135px' }" :content-style="{ width: '100px' }">
          <a-descriptions-item label="收费小计">{{ formatAmount(dataSource.pjxxsrResponse?.hyskxj || 0) }}</a-descriptions-item>
          <a-descriptions-item label="(其中赠送小计)">{{ formatAmount(dataSource.pjxxsrResponse?.hyskzsje || 0) }}</a-descriptions-item>
          <a-descriptions-item label="收款合计">{{ formatAmount(dataSource.pjxxsrResponse?.hyskhj || 0) }}</a-descriptions-item>
          <a-descriptions-item v-for="item in dataSource.hysrResponse" :key="item.bh" :label="item.mc">{{ formatAmount(item.sjje) }}</a-descriptions-item>
        </a-descriptions>

        <BaseTitle title="营业收入" class="mt-2" />
        <a-descriptions class="descriptions" bordered :column="5" :label-style="{ width: '135px' }" :content-style="{ width: '100px' }">
          <a-descriptions-item label="收费小计">{{ formatAmount(dataSource.pjxxsrResponse?.yysrzfhz || 0) }}</a-descriptions-item>
          <a-descriptions-item label="(其中退费小计)">{{ formatAmount(dataSource.pjxxsrResponse?.yysrtfhj || 0) }}</a-descriptions-item>
          <a-descriptions-item label="优惠小计">{{ formatAmount(dataSource.pjxxsrResponse?.yysryhhj || 0) }}</a-descriptions-item>
          <a-descriptions-item label="分币误差">{{ formatAmount(dataSource.pjxxsrResponse?.yysrfbwc || 0) }}</a-descriptions-item>
          <a-descriptions-item label="收款合计">{{ formatAmount(dataSource.pjxxsrResponse?.zfzfhj || 0) }}</a-descriptions-item>
          <a-descriptions-item v-for="item in dataSource.yysrResponse" :key="item.bh" :label="item.mc">{{ formatAmount(item.sjje) }}</a-descriptions-item>
          <a-descriptions-item label="医保">{{ formatAmount(dataSource.pjxxsrResponse?.ybzfhj || 0) }}</a-descriptions-item>
        </a-descriptions>

        <BaseTitle title="营业收入（项目类别)" class="mt-2" />
        <a-descriptions
          v-if="dataSource.sflbResponse && dataSource.sflbResponse.length > 0"
          class="descriptions"
          bordered
          :column="5"
          :label-style="{ width: '135px' }"
          :content-style="{ width: '100px' }"
        >
          <a-descriptions-item v-for="item in dataSource.sflbResponse" :key="item.bh" :label="item.mc">{{ formatAmount(item.sjje) }}</a-descriptions-item>
        </a-descriptions>
        <!-- <a-descriptions class="descriptions" bordered :column="4">
      <a-descriptions-item>汇总</a-descriptions-item>
      <a-descriptions-item>{{ formatAmount(dataSource.pjxxsrResponse?.yjskhz || 0) }}</a-descriptions-item>
      <a-descriptions-item label="退费合计">{{ formatAmount(dataSource.pjxxsrResponse?.yjsktfhj || 0) }}</a-descriptions-item>
      <a-descriptions-item label="合计">{{ formatAmount(dataSource.pjxxsrResponse?.yjskhj || 0) }}</a-descriptions-item>
      <a-descriptions-item v-for="item in dataSource.yjsrResponse" :key="item.bh" :label="item.mc">{{ formatAmount(item.sjje) }}</a-descriptions-item>
    </a-descriptions>
    <div v-if="dataSource.sflbResponse && dataSource.sflbResponse.length > 0" class="text-center py-2 font-bold">项目类别</div>
    <a-descriptions v-if="dataSource.sflbResponse && dataSource.sflbResponse.length > 0" class="descriptions" bordered :column="4">
      <a-descriptions-item v-for="item in dataSource.sflbResponse" :key="item.bh" :label="item.mc">{{ formatAmount(item.sjje) }}</a-descriptions-item>
    </a-descriptions> -->
        <BaseTitle title="票据信息" class="mt-2" />
        <a-descriptions class="descriptions" bordered :column="3" :label-style="{ width: '135px' }" :content-style="{ width: '100px' }">
          <a-descriptions-item label="开始发票号">{{ dataSource.pjxxsrResponse?.ksfph || '-' }}</a-descriptions-item>
          <a-descriptions-item label="结束发票号">{{ dataSource.pjxxsrResponse?.jsfph || '-' }}</a-descriptions-item>
          <a-descriptions-item label="作废发票号">{{ dataSource.pjxxsrResponse?.zffph || '-' }}</a-descriptions-item>
        </a-descriptions>
        <div class="border p-4 border-t-0 border-black -mt-[2px]">
          收费退费共：{{ dataSource.pjxxsrResponse?.sfcs || 0 }}次，其中退费：{{ dataSource.pjxxsrResponse?.tfcs || 0 }}次
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import { formatAmount } from '@/utils/format'
import userStore from '@/store/user'

const { empId } = userStore()
const route = useRoute()
const router = useRouter()
// const chargeRole = ref('')
const columns = ref([
  {
    title: '序号',
    dataIndex: 'xh',
    width: 80
  },
  {
    title: '结账周期',
    dataIndex: 'jzsj'
  },
  {
    title: '操作人',
    dataIndex: 'empName'
  },
  {
    title: '操作人编号',
    dataIndex: 'empId'
  }
])
const { loading, dataSource } = useFetch({
  url: route.query?.checkoutTotleIdList ? 'outp/oupCharge/getChargeEmpCheckOutDetail' : '/outp/oupCharge/doPreviewChargeEmpCheckOut',
  params: route.query?.checkoutTotleIdList
    ? {
        ...route.query,
        checkoutTotleIdList: route.query?.checkoutTotleIdList.split(','),
        checkoutType: '0'
      }
    : {
        czy: [empId],
        ...route.query,
        checkoutType: '0'
      },
  immediate: true
})
const onPrint = async () => {
  const { code, data, msg } = await post('/outp/outPrint/DailyReportPrintingJZ', {
    checkoutTotleIdList: route.query?.checkoutTotleIdList.split(','),
    checkoutType: '0'
  })
  if (code !== 0) return message.error(msg)
  window.openExe?.rpt(data) //调用winform打印
}
</script>
<style lang="less" scoped>
.descriptions {
  :deep(.ant-descriptions-view) {
    overflow: hidden;
    border-top: 1px solid #222222;
    border-left: 1px solid #222222;
    .ant-descriptions-row {
      text-align: right;
      border-bottom: 1px solid #222222;
      .ant-descriptions-item-label {
        padding: 16px 12px;
        text-align: right;
        border-inline-end: 1px solid #222222;
      }
      .ant-descriptions-item-content {
        border-inline-end: 1px solid #222222;
        padding: 16px 12px;
      }
    }
  }
}
</style>
